<style lang="less" scoped>
#problem /deep/ .ivu-table-wrapper {
  border: 0px solid #dcdee2;
  border-bottom: 0;
  border-right: 0;
}
#problem /deep/ .ivu-table th, .ivu-table td {
  border-bottom: 0px solid #e8eaec;
}
#problem /deep/ .ivu-table:after {
   background-color: #ffff;
 }
#problem /deep/ .ivu-table:before {
  background-color: #fff;
}
</style>
<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <card>
      <Row>
        <Col span="20">
          <Input clearable size="large" v-model="searchData.problem" style="width: 95%;"  placeholder="请输入问题"></Input>
        </Col>
        <Col span="3">
          <Button type="primary" icon="ios-search"  @click="init">搜索</Button>
        </Col>
      </Row>
    </card>
    <card style="margin-top: 1%">
      <Row>
        <Col span="3">
          <Button v-if="this.userInfo.loginName === 'LM40011'" type="primary" icon="md-add-circle" @click="addProblem">添加</Button>
        </Col>
      </Row>
      <Row>
        <Col span="24" id="problem">
          <Table :show-header="false" :columns="columns" ref="selection" :data="dataList" style="margin-top: 1%;">
            <template slot-scope="{ row }" slot="problem">
              <span style="font-size: 1rem;font-weight: 600;">{{row.problem}}</span>
            </template>
          </Table>
        </Col>
      </Row>
      <Row type="flex" justify="end" style="margin-top: 1%">
        <Page :current="pageNo" :total="totalnum" show-sizer :page-size="pageSize"
              show-total @on-change="changePageNo" @on-page-size-change="changePagesize"/>
      </Row>
    </card>
    <Modal v-model="modal.show" :title="modal.title" width="800">
      <Form :model="formData" :label-width="155">
        <FormItem label="问题">
          <Input v-model="formData.problem" :autosize="{minRows: 2,maxRows: 3}" type="textarea" style="width: 80%"></Input>
        </FormItem>
        <FormItem label="答案">
          <Input v-model="formData.answer" :autosize="{minRows: 5,maxRows: 6}" type="textarea" style="width: 80%"></Input>
        </FormItem>
        <FormItem label="排序">
          <Input v-model="formData.sort" type="number" style="width: 12%"></Input>
        </FormItem>
        <FormItem label="状态">
          <RadioGroup v-model="formData.state" >
            <Radio label="1" border>显示</Radio>
            <Radio label="0" border>隐藏</Radio>
          </RadioGroup>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="modal.show = false">取消</Button>
        <Button v-if="modal.type === '1'" type="primary" @click="addProblemOk">保存</Button>
        <Button v-if="modal.type === '2'" type="primary" @click="updateProblemOk">保存</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { getProblemList,
  insertProblem,
  updateProblem,
  deleteProblem } from '@/api/eventlist'
export default {
  components: {
  },
  data () {
    return {
      userInfo: this.$store.state.user.severUserInfo,
      disabled: true,
      searchData: {},
      searchData1: {},
      row: {},
      export_database_id: '',
      tableData: [],
      targetKeys: [],
      listStyle: {
        width: '40%',
        height: '300px'
      },
      modal: {
        title: '',
        show: false,
        type: ''
      },
      modal1: {
        title: '',
        show: false,
        type: ''
      },
      formData: {},
      formData1: {},
      totalnum: 0,
      pageNo: 1,
      pageSize: 20,
      totalnum1: 0,
      pageNo1: 1,
      pageSize1: 10,
      columns: [
        {
          type: 'expand',
          width: 50,
          render: (h, params) => {
            return h('div', {
              style: { 'font-size': '16px' },
              domProps: {
                innerHTML: params.row.answer
              }
            })
          }
        },
        { title: '常见问题', slot: 'problem' }
      ],
      dataList: []
    }
  },
  methods: {
    init () {
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        problem: this.searchData.problem
      }
      getProblemList(params).then(res => {
        if (res.data.errcode === 0) {
          this.dataList = res.data.data.results
          this.totalnum = res.data.data.totalRecord
        } else {
          this.$Notice.error({
            title: '获取数据失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    addProblem () {
      this.modal.title = '添加常用问题'
      this.modal.show = true
      this.modal.type = '1'
      this.formData = {}
    },
    addProblemOk () {
      insertProblem(this.formData).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success({
            background: true,
            content: '添加成功'
          })
          this.formData = {}
          this.modal.show = false
          this.init()
        } else {
          this.$Notice.error({
            title: '添加数据失败',
            desc: res.data.errmsg
          })
        }
      })
      this.init()
    },
    updateProblemOk () {
      updateProblem(this.formData).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success({
            background: true,
            content: '修改成功'
          })
          this.formData = {}
          this.modal.show = false
          this.init()
        } else {
          this.$Notice.error({
            title: '修改数据失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    deleteProblemOk (param) {
      deleteProblem(param).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success({
            background: true,
            content: '删除成功'
          })
          this.init()
        } else {
          this.$Notice.error({
            title: '删除数据失败',
            desc: res.data.errmsg
          })
        }
      })
      this.init()
    },
    changePagesize (pageSize) {
      this.pageSize = pageSize
      this.changePageNo()
    },
    changePageNo (pageNo) {
      this.pageNo = pageNo
      this.init()
    }
  },
  mounted () {
    if (this.userInfo.loginName === 'LM40011') {
      let columns = { title: '操作',
        align: 'center',
        width: 150,
        render: (h, params) => {
          let temp = []
          if (this.userInfo.loginName === 'LM40011') {
            temp.push(
              h('Button', {
                props: { type: 'success', size: 'small' },
                style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px' },
                on: {
                  click: () => {
                    this.modal.title = '修改常用问题'
                    this.modal.show = true
                    this.modal.type = '2'
                    this.formData = params.row
                  }
                }
              }, '编辑'),
              h('Button', {
                props: { type: 'error', size: 'small' },
                style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px' },
                on: {
                  click: () => {
                    this.deleteProblemOk(params.row)
                  }
                }
              }, '删除'))
          }
          return h('div', temp)
        }
      }
      this.columns.push(columns)
    }
    this.init()
  }
}
</script>
